import React, { useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { useKeycloak } from '../contexts/KeycloakContext';

/**
 * 登录页面组件
 */
const LoginPage = () => {
  const { authenticated, initialized, login, keycloak } = useKeycloak();
  const navigate = useNavigate();
  const location = useLocation();
  
  // 检查是否需要强制登录
  const searchParams = new URLSearchParams(location.search);
  const forceLogin = searchParams.get('force_login') === 'true';

  // 调试日志
  useEffect(() => {
    console.log('LoginPage 渲染:', { 
      authenticated, 
      initialized, 
      forceLogin,
      pathname: location.pathname,
      search: location.search
    });
  }, [authenticated, initialized, forceLogin, location]);

  // 如果需要强制登录，则只清除会话，但不自动登录
  useEffect(() => {
    if (forceLogin) {
      console.log('检测到强制登录参数，将清除所有会话');
      
      // 尝试清除 Keycloak 会话
      if (keycloak && keycloak.authenticated) {
        try {
          keycloak.clearToken();
        } catch (e) {
          console.error('清除 Keycloak 令牌失败:', e);
        }
      }
      
      // 不自动调用登录，而是让用户手动点击登录按钮
    }
  }, [forceLogin, keycloak]);

  // 如果用户已认证且不是强制登录模式，重定向到之前的页面或首页
  useEffect(() => {
    // 防止在重定向过程中多次触发
    let isMounted = true;
    
    const redirectIfNeeded = async () => {
      if (initialized && authenticated && !forceLogin && isMounted) {
        // 1. 首先检查 location.state.from（来自 PrivateRoute 的重定向）
        // 2. 然后检查 sessionStorage 中的重定向路径
        // 3. 最后使用默认路径 '/'
        const fromPath = location.state?.from?.pathname || 
                        sessionStorage.getItem('auth_redirect_path') || 
                        '/';
        
        // 添加查询参数（如果存在）
        const searchParams = location.state?.from?.search || '';
        const targetPath = fromPath + searchParams;
        
        // 避免重定向到当前页面或登录页面
        if (window.location.pathname !== targetPath && targetPath !== '/login') {
          console.log('用户已认证，重定向到:', targetPath);
          
          // 使用 navigate 进行客户端路由跳转
          navigate(targetPath, { replace: true });
          
          // 清除保存的路径
          sessionStorage.removeItem('auth_redirect_path');
        } else if (targetPath === '/login') {
          // 如果目标路径是登录页，则重定向到首页
          navigate('/', { replace: true });
        }
      }
    };
    
    redirectIfNeeded();
    
    return () => {
      isMounted = false;
    };
  }, [authenticated, initialized, navigate, forceLogin, location.state]);

  return (
    <div className="login-page">
      <div className="login-container">
        <h1>K8s运维平台</h1>
        <p>请登录以访问系统</p>
        <button 
          onClick={login} 
          disabled={!initialized}
          className="login-button"
        >
          {!initialized ? '加载中...' : '使用SSO登录'}
        </button>
      </div>

      <style jsx>{`
        .login-page {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          background-color: #f5f5f5;
        }
        .login-container {
          background: white;
          padding: 2rem;
          border-radius: 8px;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          text-align: center;
          max-width: 400px;
          width: 100%;
        }
        h1 {
          color: #333;
          margin-bottom: 1rem;
        }
        p {
          color: #666;
          margin-bottom: 2rem;
        }
        .login-button {
          background-color: #1890ff;
          color: white;
          border: none;
          padding: 0.75rem 1.5rem;
          border-radius: 4px;
          cursor: pointer;
          font-size: 1rem;
          transition: background-color 0.3s;
        }
        .login-button:hover {
          background-color: #40a9ff;
        }
        .login-button:disabled {
          background-color: #ccc;
          cursor: not-allowed;
        }
      `}</style>
    </div>
  );
};

export default LoginPage;
